import headerImgUploader from "../Components/headerImgUploader";
import validate from '../../libs/validate';

export default {
    components: {
        headerImgUploader
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            concertTableColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            }, {
                'title': '图片',
                'align': 'center',
                'key': 'img_url',
                'isImg': true,
                'width': 80
            }, {
                'title': '标题',
                'align': 'center',
                'key': 'title',

            }, {
                'title': '摘要',
                'align': 'center',
                'key': 'summary',

            }, {
                'title': '作者',
                'align': 'center',
                'key': 'author_name',
                'width': 90


            }, {
                'title': '链接地址',
                'align': 'center',
                'key': 'link_url',

            }, {
                'title': '展示顺序',
                'align': 'center',
                'key': 'orders',
                'width': 100

            }, {
                'title': '显示',
                'align': 'center',
                'key': 'is_show',
                'hook': true,
                'width': 70

            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true
            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            concertList: [],
            selectData: '',
            showModal: false,
            uploadImgCallbackPath: '',
            concertForm: {
                title: '',
                summary: '',
                author_name: '大爱',
                link_url: '',
                orders: 0,
                isShow: true
            },
            concertFormRules: {
                title: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                author_name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                link_url: [{
                    required: true,
                    validator: validate.url,
                    trigger: 'blur'

                }]
                // summary:[{
                //     required: false,
                //     // validator: validate.name,
                //     trigger: 'blur'
                // }]
            },
            uploadImgData: {},
            imgUploadUrl: '',
            modalLoading: true,
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        doSearch() {
            this.pageNum = 1;
            this.getConcertList();
        },
        clearSearch() {
            this.searchKey = '';
            this.pageNum = 1;
            this.getConcertList();
        },
        changePage(num) {
            this.pageNum = num;
            this.getConcertList();
            document.querySelector('.single-page-con').scrollTo(0, 0)

        },
        getConcertList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetConcertListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.concertList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        uploadImgSuccess(data) {
            this.uploadImgCallbackPath = data;
        },
        createImgUploadData() {
            //上传图片
            let uploadImgData = {
                token: this.user.tokenList[0],
                type: 1,
                app_key: this.http.app_key,
                timestamp: "2017-09-26 15:52:28"
            }
            let uploadImgDataSign = this.http.getSign({
                type: 1,
                token: this.user.tokenList[0]
            });
            uploadImgData.sign = uploadImgDataSign;
            this.uploadImgData = uploadImgData;
        },
        clickOK() {
            this.changeLoadingStatus(true)
            if (!this.uploadImgCallbackPath) {
                this.changeLoadingStatus(false);
                this.errorHandle("请先上传图片！");
                return;
            }
            this.$refs.concertForm.validate(valid => {
                if (!valid) {
                    this.changeLoadingStatus(false);
                    return
                }
                let postData = JSON.parse(JSON.stringify(this.concertForm));
                postData.img_url = this.uploadImgCallbackPath;
                postData.is_show = this.concertForm.isShow ? '1' : '0';
                postData.token = this.user.tokenList[0];
                postData.link_url = encodeURIComponent(postData.link_url)
                if (this.selectData) {
                    postData.uuid = this.selectData.uuid;
                }
                delete postData.isShow
                this.http.post(this.postUrl.addNewConcertUrl, postData).then((data) => {
                    if (data.code > -1) {
                        this.$Notice.success({
                            title: this.selectData ? '修改成功！' : '新增成功！'
                        })
                        this.showModal = false;
                        this.getConcertList();
                    } else {
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                }, () => {
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        deleteConcert(param) {
            this.http.post(this.postUrl.deleteConcertUrl, {
                token: this.user.tokenList[0],
                uuid: param.uuid
            }).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getConcertList()
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        }
    },
    created() {
        this.concertTableColumns.forEach(item => {
            if (item.isImg) {
                item.render = (h, param) => {
                    return h("img", {
                        attrs: {
                            src: this.postUrl.imgPath + param.row.img_url
                        },
                        style: {
                            width: "40px",
                            height: "40px",
                            "margin-top": "5px"
                        }
                    });
                };
            }
            if (item.hook) {
                item.render = (h, param) => {
                    return h('Icon', {
                        props: {
                            type: param.row.is_show == '1' ? 'checkmark-circled' : 'close-circled',
                            size: 16,
                            color: param.row.is_show == '1' ? "#00a854" : '#f04134'
                        }
                    })
                };
            }
            if (item.key === 'link_url') {
                item.render = ((h, param) => {
                    return h('a', {
                        attrs: {
                            href: param.row.link_url,
                            target: '_blank'

                        }
                    }, param.row.link_url)
                })
            }
            if (item.action) {
                item.render = ((h, param) => {
                    return h('div', [
                        h('Button', {
                            class: 'table-action-box',
                            style: {
                                'margin-right': '10px',
                                // 'width':'40px',
                                // 'padding':'6px 0',
                            },
                            props: {
                                type: "primary",
                                icon: 'edit',
                                shape: "circle"
                            },
                            on: {
                                click: () => {
                                    this.selectData = param.row;
                                    this.uploadImgCallbackPath = this.selectData.img_url;
                                    this.concertForm = {
                                        title: this.selectData.title,
                                        summary: this.selectData.summary,
                                        author_name: this.selectData.author_name,
                                        link_url: this.selectData.link_url,
                                        orders: Number(this.selectData.orders),
                                        isShow: this.selectData.is_show == '1' ? true : false
                                    }
                                    this.showModal = true;
                                }
                            }
                        }),
                        h(
                            "Poptip", {
                                props: {
                                    confirm: true,
                                    title: "您确定要忽略这条资讯?",
                                    transfer: true
                                },
                                on: {
                                    "on-ok": () => {
                                        // this.ignoreFeedback(param.row)

                                        this.deleteConcert(param.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    class: 'ignore-btn',
                                    style: {
                                        // 'width':'40px',
                                        // 'padding':'6px 0',
                                    },
                                    props: {
                                        type: "error",
                                        icon: 'trash-b',
                                        shape: "circle"
                                        
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                })
                            ]
                        )
                    ])
                })

            }
        })
        if (this.user) {
            this.getConcertList()
            this.createImgUploadData()
        }

    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getConcertList()
                this.createImgUploadData()

            }
        },
        showModal(val) {
            if (!val) {
                this.selectData = '';
                this.uploadImgCallbackPath = "";
                this.concertForm = {
                    title: '',
                    summary: '',
                    author_name: '大爱',
                    link_url: '',
                    orders: 0,
                    isShow: true
                }
                this.$refs.concertForm.resetFields()

            }
        }
    }
}
